<template>
    <div class="det">
        <van-nav-bar
                title="商品详情"
                left-arrow
                @click-left="onClickLeft"
        />
        <!--轮播图-->
        <van-swipe @change="onChange">
            <van-swipe-item v-for="v in swp"><img :src="v.original" alt="" style="width: 100%;vertical-align:bottom">
            </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator" style="margin-bottom: 5px;padding: 3px 8px;
    line-height: 1;
    background-color: rgba(0,0,0,.3);
    border-radius: 50px;
    font-size: 13px;
    color: hsla(0,0%,100%,.8);">{{ current + 1 }}/{{swp.length}}
                </div>
            </template>
        </van-swipe>
        <!--商品简介-->
        <div style="padding: 10px 15px 15px 15px;
    border-radius: 5px 5px 0 0;
    background-color: #fff;">
            <div style="display: flex;justify-content: space-between;">
                <p style="line-height: 40px
"><span style="color: rgb(255, 0, 0);
    font-size: 16px;
    font-weight: 600;">￥</span><span style="    color: rgb(255, 0, 0);
    font-size: 25px;
    font-weight: 600;">{{price}}</span></p>
                <div style="display: flex;" @click="collect">
                    <div style="margin-right: 15px!important;">
                        <i class="iconfont">&#xe8b0;</i>
                        <p style="font-size: 10px;">分享</p>
                    </div>
                    <div @click="collect">
                        <i class="iconfont">&#xe613;</i>
                        <p style="font-size: 10px;">收藏</p>
                    </div>
                </div>
            </div>
            <p style="overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;-webkit-line-clamp: 2;box-sizing: border-box;"><span
                    style="border-radius: 4px;color: #fff;font-size: 10px;width: 30px;text-align: center;padding: 2px 4px;background: linear-gradient(90deg,#fd5632 0,#ef0d25);margin-right: 5px!important;color: #fff;font-size: 10px;text-align: center;">自营</span><span
                    style="font-size: 16px;
    font-weight: 700;">{{name}}</span></p>
        </div>
        <!--规格-->
        <div style="border-radius: 7px;
    margin-top: 22px;
    background-color: #fff;padding: 15px;padding-bottom: 15px;display: flex;justify-content: space-between;">
            <p><span style="font-size: 14px;font-weight:700">已选</span><span
                    style="margin-left: 10px!important;font-size: 14px;">{{numm}}个</span></p>
            <van-icon name="ellipsis" @click="show = true"/>
        </div>
        <!--具体规格-->
        <van-popup v-model="show" closeable position="bottom" :style="{ height: '50%' }">
            <div style="background-color: #fff;
    height: 120px;
    width: 100%;padding: 10px!important;box-sizing: border-box;display: flex;">
                <div style="width: 100px;
    height: 100px;"><img :src="pic" alt="" style="width:100%;"></div>
                <div style="margin-left: 15px;
    margin-top: 40px;">
                    <p><span style="color: rgb(255, 0, 0);
    font-size: 16px;
    font-weight: 600;">￥</span><span style="    color: rgb(255, 0, 0);
    font-size: 25px;
    font-weight: 600;">{{price}}</span></p>
                    <p style="font-size: 14px;margin-top: 5px!important;">已选 1个</p>
                </div>
            </div>
            <div style="padding: 10px!important;display: flex;justify-content: space-between;">
                <p>数量</p>
                <div style="display:flex;">
                    <p style="height: 25px;color: #c8c9cc!important;
    background: #f7f8fa!important;border-radius: 4px 0 0 4px;">
                        <van-icon name="minus"/>
                    </p>
                    <van-field v-model="value" style="width:40px;font-size: 13px;
    background: rgb(242, 243, 245);
    height: 25px;padding-left: 15px;margin: 0 3px;"/>
                    <p style="background: rgb(242, 243, 245);
    height: 25px;
    color: rgb(50, 50, 51);border-radius: 0 4px 4px 0;">
                        <van-icon name="plus"/>
                    </p>
                </div>
            </div>
            <!--加入购物车-->
            <van-goods-action>
                <van-goods-action-button type="warning" text="加入购物车" @click="push()"/>
                <van-goods-action-button type="danger" text="立即购买" @click="buying()"/>
            </van-goods-action>
        </van-popup>
        <!--评价-->
        <div style="border-radius: 7px;
    margin-top: 11px;
    background-color: #fff;padding: 15px;padding-bottom: 10px;display: flex;justify-content: space-between;">
            <p><span style="font-size: 14px;font-weight:700">暂无评价</span></p>
            <div>
                <span style="font-size: 12px;vertical-align: super;">好评率：{{grade}}%</span>
                <van-icon name="arrow"/>
            </div>
        </div>
        <!--问答-->
        <div style="border-radius: 7px;
    margin-top: 11px;
    background-color: #fff;font-size:14px;">
            <p style="padding: 15px;padding-bottom: 10px;font-weight: 700;">暂无问答</p>
            <p style="padding: 20px;text-align: center;padding-top: 15px"><span style="margin-bottom: 10px!important;">商品好不好, 问问买过的人吧</span>
            </p>
            <p style="padding-bottom: 20px;text-align: center;"><span style="padding: 6px 25px;
    border: 1px solid #a6a6a6;
    border-radius: 35px;">问问买家</span></p>
        </div>
        <!--店铺信息-->
        <div style="font-size: 14px;border-radius: 7px;
    margin-top: 11px;
    background-color: #fff;
    padding: 10px;">
            <div style="display: flex;">
                <div style="display: flex;"><p style="width: 100px;
    height: auto;
    border-radius: 0px;
    overflow: visible;"><img :src="img" alt="" style="width:100%;" yle></p><span
                        style="font-weight: 600;line-height: 30px;">{{shops}}</span><span v-if="shops=='平台自营'" style="border-radius: 4px;
    color: #fff;
    font-size: 10px;
    width: 30px;
    text-align: center;
    padding: 2px 4px;background: linear-gradient(90deg,#fd5632 0,#ef0d25);margin:0 5px;height:13.4px;">自营</span></div>
                <div><span style="color: #fa3534!important;
    border: 1px solid #fa3534!important;
    background-color: #fef0f0!important;line-height: 21px;
    padding: 5px 10px;
    border-radius: 16px;
    font-size: 12px;
    margin-top: -8px;" @click="goAll">全部商品</span><span style="color: #fff!important;
    border: 1px solid #f90!important;
    background-color: #f90!important;line-height: 21px;
    padding: 5px 10px;
    border-radius: 16px;
    font-size: 12px;
    margin-top: -8px;
    margin-left: 10px;" @click="goShop">进店逛逛</span></div>
            </div>
            <div style="margin-top: 17px;
    margin-bottom: 5px;text-align: center;display: flex;justify-content: space-between;font-size: 12px;
    color: #909399;">
                <p style="width:33%;">商品描述 {{ms}}</p>
                <p style="width:33%;">卖家信用 {{xy}}</p>
                <p style="width:33%;">物流服务 {{fw}}</p>
            </div>
        </div>
        <!--图文详情-->
        <div>
            <div style="display: flex;width:60%;margin:10px auto">
                <p style="width: 75px;
    border-color: rgb(220, 223, 230);border-bottom: 1px solid #e4e7ed;height: 10px;"></p>
                <span style="color: rgb(144, 147, 153);
    font-size: 13px;padding: 0 8px;">图文详情</span>
                <p style="width: 75px;
    border-color: rgb(220, 223, 230);border-bottom: 1px solid #e4e7ed;height: 10px;"></p>
            </div>
        </div>
        <!--详情-->
        <div v-html="nrA" class="c">
        </div>
        <!--规格参数详情-->
        <div>
            <div style="display: flex;width:65%;margin:10px auto">
                <p style="width: 75px;
    border-color: rgb(220, 223, 230);border-bottom: 1px solid #e4e7ed;height: 10px;"></p>
                <span style="color: rgb(144, 147, 153);
    font-size: 13px;padding: 0 8px;">规格参数详情</span>
                <p style="width: 75px;
    border-color: rgb(220, 223, 230);border-bottom: 1px solid #e4e7ed;height: 10px;"></p>
            </div>
        </div>
        <div class="c">
            <div v-for="v in zt" style="border-left: 1px solid rgb(228, 231, 237);
    border-top: 1px solid rgb(228, 231, 237);">
                <div style="border-bottom: 1px solid rgb(228, 231, 237);
    border-right: 1px solid rgb(228, 231, 237);padding: 10px 15px!important;font-size: 14px;
    color: #303133;
    font-weight: 700;">{{v.group_name}}
                </div>
                <div v-for="c in v.params" style="display: flex;box-sizing: border-box;font-size: 12px!important;
    color: #8e8e8e!important;">
                    <p style="width:50%;border-bottom: 1px solid rgb(228, 231, 237);
    border-right: 1px solid rgb(228, 231, 237);padding: 10px 15px!important;">{{c.param_name}}</p>
                    <p style="width:50%;padding: 10px 15px!important;border-bottom: 1px solid rgb(228, 231, 237);
    border-right: 1px solid rgb(228, 231, 237);">{{c.param_value}}</p>
                </div>
            </div>
        </div>
        <div style="background-color: #ffffff;height: 40px!important;">
            <div style="display: flex;width:65%;margin:0 auto;line-height: 40px">
                <p style="width: 75px;
    border-color: rgb(220, 223, 230);border-bottom: 1px solid #e4e7ed;height: 20px;"></p>
                <span style="color: rgb(144, 147, 153);
    font-size: 13px;padding: 0 8px;">到底了哦~</span>
                <p style="width: 75px;
    border-color: rgb(220, 223, 230);border-bottom: 1px solid #e4e7ed;height: 20px;"></p>
            </div>
        </div>
        <!--分隔线-->
        <p style="height:1px;margin-bottom: 150px"></p>
        <!--底部购物车按钮-->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服"/>
            <van-goods-action-icon icon="cart-o" text="购物车" :badge="num"/>
            <van-goods-action-button type="warning" text="加入购物车" @click="push()"/>
            <van-goods-action-button type="danger" text="立即购买" @click="buying()"/>
        </van-goods-action>
    </div>
</template>

<script>
    import jsp from '../../Api/Api'
    import Vue from 'vue'
    import {Dialog} from 'vant';

    Vue.use(Dialog);
    export default {
        name: "Detailed",
        data() {
            return {
                swp: [],
                current: 0,
                num: 0,
                price: 0,
                name: '',
                numm: 1,
                grade: '',
                shops: '',
                img: '',
                ms: '',
                xy: '',
                fw: '',
                msg: [],
                id: '',
                nrA: '',
                zt: [],
                show: false,
                pic: '',
                value: 1,
            }
        },
        created() {
            let a = this.$route.query.goods_id
            let b = localStorage.getItem('accessToken')
            //包含轮播图等信息
            jsp.goodsSw(a).then(data => {
                // console.log(data.data)
                this.swp = data.data.gallery_list
                this.price = data.data.price
                this.name = data.data.goods_name
                this.grade = data.data.grade
                this.nrA = data.data.intro
                this.zt = data.data.param_list
                this.pic = data.data.thumbnail
                //所属商铺信息
                jsp.shopMsg(data.data.seller_id).then(data => {
                    // console.log(data.data)
                    this.shops = data.data.shop_name
                    this.img = data.data.shop_logo
                    this.ms = data.data.shop_description_credit
                    this.xy = data.data.shop_credit
                    this.fw = data.data.shop_delivery_credit
                    this.id = data.data.shop_id
                }).catch(error => console.log(error))
            }).catch(error => console.log(error))
            jsp.cartPrice(b).then(data => {
                this.num = 0
                // console.log(data.data.cart_list)
                let d = data.data.cart_list
                d.forEach(v => {
                    // console.log(v)
                    v.sku_list.forEach(i => {
                        // console.log(i)
                        this.num += i.num
                    })
                })
            }).catch()
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            onChange(index) {
                this.current = index;
            },
            collect() {
                Dialog.confirm({
                    title: '提示',
                    message: '您还未登录，请先登录~',
                    cancelButtonText: '再逛逛',
                    confirmButtonText: '去登录',
                }).then(() => {
                    this.$router.push('/enter')
                }).catch(() => {

                });
            },
            push() {

                // let a = this.$route.query.goods_id
                let b = localStorage.getItem('accessToken')
                let c = this.$route.query.sku_id
                // console.log(a, b, c)
                jsp.getTable1H17(c, 1, '', '', b).then(data => {
                    // console.log(data.data)
                    jsp.cartPrice(b).then(data => {
                        this.num = 0
                        // console.log(data.data.cart_list)
                        let d = data.data.cart_list
                        d.forEach(v => {
                            // console.log(v)
                            v.sku_list.forEach(i => {
                                this.num += i.num
                            })
                        })
                    }).catch()
                }).catch()
            },
            buying() {
                // let a = this.$route.query.goods_id
                // jsp.cartPrice().then().catch()
                this.$router.push('/home')
            },
            goShop() {
                console.log(this.id)
                this.$router.push({path: '/shop', query: {shop_id: this.id}})
            },
            goAll() {
                // console.log(v)
                this.$router.push({path: '/shop/all', query: {shop_id: this.id}})
            },
        },
        // mounted() {
        //     let b = localStorage.getItem('accessToken')
        //     jsp.cartPrice(b).then(data => {
        //         this.num = 0
        //         console.log(data.data.cart_list)
        //         let d = data.data.cart_list
        //         d.forEach(v => {
        //             // console.log(v)
        //             v.sku_list.forEach(i => {
        //                 // console.log(i)
        //                 this.num += i.num
        //             })
        //             // this.num += this.num
        //         })
        //         // this.num
        //     }).catch()
        // }
    }
</script>

<style scoped>
    .c {
        background-color: #fff;
        padding: 10px;
        border-radius: 10px;
    }

    .c >>> img {
        width: 100%;
    }

    >>> .van-nav-bar .van-icon {
        color: #000 !important;
    }

    >>> .van-hairline--bottom::after {
        border: none;
    }

    >>> .van-cell::after {
        border: none;
    }

    >>> .van-cell {
        padding: 0;
    }

    .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        /*background: rgba(0, 0, 0, 0.1);*/
    }

    @font-face {
        font-family: 'iconfont';  /* Project id 2384427 */
        src: url('http://at.alicdn.com/t/font_2384427_gp69esatd7a.woff2?t=1623914035531') format('woff2'),
        url('http://at.alicdn.com/t/font_2384427_gp69esatd7a.woff?t=1623914035531') format('woff'),
        url('http://at.alicdn.com/t/font_2384427_gp69esatd7a.ttf?t=1623914035531') format('truetype');
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 20px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }
</style>